<template>
  <div>
    <h3>案例-渲染几个分类</h3>
    <hr />
    <Cate title="美食">
      <!-- 添加一个slot的属性 -->
      <!-- <img slot="con" :src="foodUrl" alt="" />
      <p slot="con">这真是人间美味啊</p> -->
      <!-- template 不会产生新标签，便于写语法 -->
      <!-- <template slot="con"> -->
      <template v-slot:con>
        <img :src="foodUrl" alt="" />
        <p>这真是人间美味啊</p>
      </template>

      <!-- 标签只能写属性的写法，指令只能在template -->
      <template #link>
        <a href="#">更多美食</a>
      </template>
    </Cate>

    <Cate title="游戏">
      <ul slot="con">
        <li v-for="item in gameArr" :key="item">
          <span>{{ item }}</span>
        </li>
      </ul>

      <p slot="link">
        <a href="#">单机游戏</a>
        <a href="#">网络游戏</a>
      </p>
    </Cate>

    <Cate title="电影">
      <video slot="con" controls :src="movieUrl"></video>

      <p slot="link">
        <a href="#">经典</a>
        <a href="#">热门</a>
        <a href="#">推荐</a>
      </p>
    </Cate>

    <!-- <cate title="随便"></cate> -->
  </div>
</template>

<script>
import Cate from '../components/Cate.vue'

export default {
  data() {
    return {
      foodUrl: 'https://s3.ax1x.com/2021/01/16/srJlq0.jpg',
      gameArr: ['英雄联盟手游', '劲舞团', '红色警戒'],
      movieUrl: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
    }
  },
  components: {
    Cate
  }
}
</script>

<style lang="less" scoped></style>
